<template>
    <div class="link-container layout-padding flex-column-center">
        <img class="link-img" src="@/assets/link.svg" alt="">
        <div class="link-wrap">
            <h3>即将跳转到外部网站[{{ state.title }}]</h3>
            <div>您将要访问的链接不属性{{ hostname }}，请关注您的帐号安全！</div>
            <div>{{ state.link }}</div>
            <el-button class="link-btn" round @click="handleOpenPage">继续前往访问</el-button>
            
        </div>
    </div>
</template>

<script setup lang="ts" name="RouterViewLink">
import { reactive, watch } from 'vue'
import { useRoute } from 'vue-router'
import { validateURL } from '@/utils/validate'

const route = useRoute()

const hostname = window.location.hostname

const state = reactive({
    title: '',
    link: ''
})

watch(() => route.path, () => {
    state.title = route.meta?.title || '外链'
    state.link = route.meta?.linkTo || ''
}, {immediate: true})

// 继续前往访问
function handleOpenPage() {
    const { origin } = window.location
    if(validateURL(state.link)) window.open(state.link)
    else window.open(`${origin}${state.link}`)
}
</script>

<style scoped lang="scss">
.link-img {
    width: 200px;
}
.link-wrap {
    width: 500px;
    border: 1px solid var(--mxg-border-color-light);
    border-radius: 10px;
    padding: 20px;
    line-height: 30px;
    font-size: 15px;
    margin-top: 20px;
    .link-btn {
        float: right;
    }
}
</style>